<template>
	<view>
		<view class="b-box">
			<view class="title">
				<view class="title-count">共{{ videoInfo.questionList.length }}道题，已完成 {{ current_answer_num }} 题</view>
				<view class="title-button" @click="goBack()">重看视频</view>
			</view>
			<view class="answer" v-for="(item,index) in videoInfo.questionList">
				<view class="answer-title">{{ item.question }}</view>

				<view :class="item.current_choose == indexTwo ? 'answer-choose-active answer-choose' :'answer-choose' "v-for="(itemTwo,indexTwo) in item.answers" @click="choose_answer(index,indexTwo)">

					<view class="answer-choose-left">{{ itemTwo }}</view>
					<!-- <image class="answer-choose-right" src="https://wechat-pictures-1301970825.cos.ap-beijing.myqcloud.com/shop/duigou.png" mode=""></image> -->
				</view>
			</view>
			<view class="answer-btn" @click="submit()">确定</view>
			<view style="height: 50upx;"></view>
		</view>

		<!-- 答题错误弹框   list.title 视频标题  list.status  答题状态   url 点击button跳转的页面 -->
		<newAnswerMessage v-if="answer_error" :list="jgList" :url="backUrl"></newAnswerMessage>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				videoId:'',
				code:'',
				videoInfo:{},
				jgList:[
					// {title:'题目1',status:true}
				],
				answer_error:false,
				backUrl:'', // 重新观看url

				current_answer_num:0,
				activityId:'',
				ids:[]
			}
		},
		onLoad(req) {
			this.videoId = req.videoId;
			this.activityId = req.activityId;
			this.code = req.code;
			var idsarr = decodeURIComponent(req.ids).split(',')
			console.log(idsarr,'ws')
			if(idsarr[0]) {
				this.ids = idsarr;
			}
			this.getVideo();
			this.backUrl = '/pages/newAnswer/index?requestCode='+this.code+'&videoId='+this.videoId;
			this.$dadian("");
		},
		methods: {
			getVideo() {
				var that = this;
				var data = {
					videoId:this.videoId,
					questionIds:that.ids
				};
				that.$NoteApi.doRequest("post", "ruiVideo/detail", data,'json').then(res => {
					if(res.data.code == 0){
						var datas = res.data.data;
						for(var i = 0; i < datas.questionList.length; i++ ) {
							datas.questionList[i].current_choose = 99;
						}
						this.videoInfo = datas;
						console.log(this.videoInfo)
					}
				})
			},
			// 选择答案
			choose_answer(index,indexTwo){
				this.videoInfo.questionList[index].current_choose = indexTwo;
				var num = 0;
				for(var i = 0; i < this.videoInfo.questionList.length; i++ ) {
					if(this.videoInfo.questionList[i].current_choose != 99) {
						num++;
					}
				}
				this.current_answer_num = num;
			},
			submit() {
				var key = 'kTzsAsJXUDK-LysX7j8qY7qWgzWT_kVQv_F7-IJvHbk';
				var that = this;
				that.$NoteApi.doRequest("post","rkAuthAndPush/needTipAuthJudge", {},'json').then(res => {
					if(res.data.code == 0){
						// true 需要上报 false 不需要
						if(res.data.data) {
							uni.requestSubscribeMessage({
							  tmplIds: ['kTzsAsJXUDK-LysX7j8qY7qWgzWT_kVQv_F7-IJvHbk'],
							  success (resquest) {
								  that.submitNext();
								  if(resquest[key] == 'accept') {
									  that.pushMessagee();
								  }
							  }
							})
						}else {
							that.submitNext();
							// that.pushMessagee();
						}
					}
				})
			},
			// 提交答案
			submitNext() {
				var answers = [];
				for(var i = 0; i < this.videoInfo.questionList.length; i++ ) {
					if(this.videoInfo.questionList[i].current_choose == 99) {
						uni.showToast({
							title:'请完整答题!'
						})
						return
					}else {
						var answer = '';
						if(this.videoInfo.questionList[i].current_choose == 0) {
							answer = 'A';
						}
						if(this.videoInfo.questionList[i].current_choose == 1) {
							answer = 'B';
						}
						if(this.videoInfo.questionList[i].current_choose == 2) {
							answer = 'C';
						}
						if(this.videoInfo.questionList[i].current_choose == 3) {
							answer = 'D';
						}
						answers.push({
							answer:answer,
							questionId:this.videoInfo.questionList[i].id
						})

					}
				}
				var that = this;
				var data = {
					videoId:this.videoId,
					unitList:answers
				};
				that.$NoteApi.doRequest("post", "ruiVideo/answer/submit", data,'json').then(res => {
					if(res.data.code == 0){
						// jgList:[{title:'题目1',status:true}],
						console.log(res.data.data,'原始数组');
						var info = res.data.data;
						//
						// 答错误
						if(info.hasError) {
							for(var i = 0; i < info.unitList.length; i++ ) {
								if(info.unitList[i].isRight == 1) {
									this.jgList.push({
										title:info.unitList[i].answer,
										status:true
									})
								}else {
									this.jgList.push({
										title:info.unitList[i].answer,
										status:false
									})
								}
							}
							this.answer_error = true;
						}else { // 答对
							that.set_answer_storage();
							uni.reLaunch({
								url:'/pages/newAnswer/end?code='+this.code+'&video_id='+this.videoId+'&activityId='+this.activityId
							})
						}
					}
				})
			},
			// 答题完成后 如果对 去缓存删除 不对保持不动
			set_answer_storage() {
			    var that = this;
			    var ids = [];
			    uni.getStorage({
			        key: 'user_answers',
			        success: function (res) {
			            i
			                for(var i = 0; i < res.data.length;i++) {
			                    if(that.videoId == res.data[i].videoId) {
			                        res.data.splice(i, 1);
			                        uni.setStorage({ key: 'user_answers',data: res.data });
			                    }
			                }

			        },
			        fail() {

			        }
			    });
			},
			// 授权上报
			pushMessagee() {
				var that = this;
				that.$NoteApi.doRequest("post", "rkAuthAndPush/report", {},'json').then(res => {
					if(res.data.code == 0){

					}
				})
			},
			goBack() {
				this.$dadian("watchAgain")
				uni.reLaunch({
					url:'/pages/newAnswer/index?requestCode='+this.code+'&videoId='+this.videoId
				})
			}
		}
	}
</script>

<style scoped>
.b-box {
	width: 690upx;
	min-height: 10upx;
	margin: 0 auto;
}
.video-name {
	width: 690upx;
	font-size: 36upx;
	font-weight: 500;
	color: #000;
	overflow:hidden;
	text-overflow:ellipsis;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	min-height: 10upx;
	margin-top: 30upx;
	margin-bottom: 20upx;
}
.video-tag {
	display: inline-block;
	min-width: 10upx;
	height: 54upx;
	line-height: 54upx;
	background: #EA7C0F;
	color: #fff;
	padding: 0 20upx;
	border-radius: 28upx 0upx 28upx 0upx;
}
.video-info {
	min-height: 10upx;
	margin: 30upx 0;
	color: #666;
	font-size: 28upx;
	display: flex;
}
.video-info-time {
	flex: 1;
}
.video-info-num {

}
.video-answer-num {
	color: #666;
	font-size: 28upx;
	margin: 30upx 0;
}

.answer {
	min-height: 10upx;
	margin-bottom: 40upx;
}
.answer-title {
	line-height: 48upx;
	color: #333;
	font-weight: 600;
	font-size: 32upx;
	margin-bottom: 30upx;
}
.answer-choose {
	min-height: 10upx;
	background-color: #fff;
	background: #F0F0F0;
	border-radius: 16upx;
	font-size: 36upx;
	color: #333;
	font-weight: 500;
	display: flex;
	align-items: center;
	margin-bottom: 20upx;
	padding: 30upx 0;
}
.answer-choose-active {
	background: #ECF6F0;
	color: #219F64;
}
.answer-choose-left {
	flex: 1;
	padding-left: 30upx;
}

.answer-choose-right {
	margin-right:40upx;
	width: 36upx;
	height: 32upx;
}
.answer-btn {
	width: 690upx;
	height: 100upx;
	line-height: 100upx;
	color: #fff;
	background-color: #5CAE77;
	text-align: center;
	border-radius: 50upx;
}
/* 后期添加 */
.video-date{
	width: 100%;
	display: flex;
	margin-bottom: 40upx;
	align-items: center;
}
.video-date-end-date{
	font-size: 34upx;
	font-weight: 500;
	color: #999999;
}
.video-date-value{
	font-size: 34upx;
	color: #EA7C0F;
	font-weight: 500;
}
.video-desc{
	width: 100%;
	background-color: #E2E2E2;
	border-radius: 4upx;
	box-sizing: border-box;
	padding: 16upx;
	margin-bottom: 40upx;
}
.video-desc-item{
	width: 100%;
	display: flex;
	box-sizing: border-box;
	margin-bottom: 8upx;
	color: #666;
	font-size: 30upx;
	align-items: center;
}
.video-desc .icon{
	width: 30upx;
	height: 30upx;
	margin-right: 10upx;
	display: flex;
	align-items: center;
	justify-content: center;
}
.title{
	width: 100%;
	display: flex;
	box-sizing: border-box;
	padding: 34upx 0upx;
	align-items: center;
	justify-content: space-between;
}
.title .title-count{
	font-size: 32upx;
	color: #666666;
	font-weight: 400;
}
.title-button{
	font-size: 32upx;
	color: #fff;
	background-color:#5CAE77;
	border-radius: 30upx;
	width: 180upx;
	height: 60upx;
	line-height: 60upx;
	text-align: center;
}
</style>
